import _ from 'lodash';
import * as React from 'react';
import {observer} from 'mobx-react';
import {Table, Row, Col, Button, message, Modal} from 'antd';
import {PositionBean} from '../../../../model/position/Position';
import {listStore, editStore, searchStore, mediaTypeToText} from '../PositionStore';

const columns = [{
    title: '广告位标题',
    dataIndex: 'positionTitle',
    key:'positionTitle'
},{
    title: '广告位名称',
    dataIndex: 'positionName',
    key:'positionName'
},{
    title: '业务方标题',
    dataIndex: 'buTitle',
    key:'buTitle'
},{
    title: '业务方名称',
    dataIndex: 'buName',
    key:'buName'
},{
    title: '应用标题',
    dataIndex: 'appTitle',
    key:'appTitle'
},{
    title: '应用名称',
    dataIndex: 'appName',
    key:'appName'
},{
    title: '平台标题',
    dataIndex: 'platformTitle',
    key:'platformTitle'
},{
    title: '平台名称',
    dataIndex: 'platformName',
    key:'platformName'
},{
    title: '页面标题',
    dataIndex: 'pageTitle',
    key:'pageTitle'
},{
    title: '页面名称',
    dataIndex: 'pageName',
    key:'pageName'
},{
    title: '类型',
    dataIndex: 'mediaTypes',
    key: 'mediaTypes',
    render:(mediaTypes, record) =>{
        let mediaTypeArr = [];

        _.forEach(mediaTypes,(item)=>{
            mediaTypeArr.push(mediaTypeToText[item]);
        })

        return mediaTypeArr.join(' , ');
    }
},{
    title: '操作',
    key: 'operation',
    render: (text, record) => (
        <span>
            <a href="javascript:void(0);" onClick={()=>{
                editStore.load(record.id);
            }}>编辑</a>
            <span className="ant-divider" />
            <a href="javascript:void(0);" onClick={(e)=>{
                e.preventDefault();
                Modal.confirm({
                    title: '删除广告位',
                    content: '确定删除该广告位吗?',
                    okText: '确定',
                    cancelText: '取消',
                    onOk:()=>{
                        listStore.delete(parseInt(record.id))
                            .then((res)=>{
                                if(res.success){
                                    message.success(res.message,3);
                                    listStore.refresh(searchStore);
                                }else{
                                    message.error(res.message,3);
                                }
                            })
                    }
                }); 
            }}>删除</a>
        </span>
    )
}]

@observer
export class ListTable extends React.Component<any, any> {
    componentDidMount(){
        listStore.load();
    }
    handleTableChange(me){
        return function(pagination, filters, sorter){
            let searchParams = searchStore.getValues();

            listStore.load(_.assign(searchParams,{
                pageCount: pagination.pageSize,
                pageIndex: pagination.current
            }));
        }
    }
    render() {
        return (
            <UserTable style={{paddingLeft:10}}
                    columns={columns} rowKey="id"
                    dataSource={listStore.data}
                    pagination={listStore.pagination}
                    onChange={this.handleTableChange(this)}
                />
        )
    }
}

class UserTable extends Table<PositionBean<any>> {}
